<template>
  <div class="mining-container">
    <!-- 顶部导航 -->
    <div class="nav-header">
      <div class="back-button" @click="goBack">
        <van-icon name="arrow-left" size="20" />
      </div>
      <div class="header-title">挖矿</div>
    </div>

    <!-- 主要内容 -->
    <div class="content-container">
      <div class="steps-and-content">
        <!-- 左侧步骤 -->
        <div class="steps-container">
          <div class="steps-title">挖矿步骤</div>
          
          <div class="steps-list">
            <div 
              class="step-item"
              :class="{ 'active': activeStep === 1 }"
              @click="handleStepClick(1)"
            >
              <div class="step-number">1</div>
              <span>下载安瞳APP</span>
            </div>
            
            <div 
              class="step-item"
              :class="{ 'active': activeStep === 2 }"
              @click="handleStepClick(2)"
            >
              <div class="step-number">2</div>
              <span>手表蓝牙数据测量</span>
            </div>
            
            <div 
              class="step-item"
              :class="{ 'active': activeStep === 3 }"
              @click="handleStepClick(3)"
            >
              <div class="step-number">3</div>
              <span>注册APP链接蓝牙手表</span>
            </div>
            
            <div 
              class="step-item"
              :class="{ 'active': activeStep === 4 }"
              @click="handleStepClick(4)"
            >
              <div class="step-number">4</div>
              <span>贡献数据到DAPP</span>
            </div>
          </div>

          <div class="mining-profits-card">
            <h3 class="profits-title">我的挖矿收益</h3>
            <div class="profit-row">
              <div class="profit-label">日收益</div>
              <div class="profit-value">{{ finance.dayAmt || '0' }}HDFS</div>
            </div>
            <div class="profit-row">
              <div class="profit-label">月收益</div>
              <div class="profit-value">{{ finance.mouthAmt || '0' }}HDFS</div>
            </div>
            <div class="profit-row">
              <div class="profit-label">年收益</div>
              <div class="profit-value">{{ finance.yearAmt || '0' }}HDFS</div>
            </div>
          </div>
        </div>
        
        <!-- 右侧内容 -->
        <div class="content-area">
          <!-- 步骤1：下载安瞳APP -->
          <div v-if="activeStep === 1" class="step-content">
            <div class="content-card">
              <h2 class="card-title">下载安瞳APP</h2>
              
              <div class="app-image-container">
                <img 
                  src="https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?q=80&w=1000&auto=format&fit=crop"
                  alt="安瞳APP" 
                  class="app-image"
                />
              </div>
              
              <div class="download-buttons">
                <van-button 
                  plain 
                  type="primary" 
                  class="ios-button" 
                  @click="downloadApp('ios')"
                >
                  <van-icon name="info-o" class="button-icon" />
                  iOS下载
                </van-button>
                <van-button 
                  plain 
                  type="success" 
                  class="android-button" 
                  @click="downloadApp('android')"
                >
                  <van-icon name="down" class="button-icon" />
                  Android下载
                </van-button>
              </div>
              
              <div class="instruction-section">
                <h3 class="section-subtitle">操作步骤</h3>
                <ol class="step-list">
                  <li>扫描上方二维码或点击下载按钮获取安瞳APP</li>
                  <li>安装APP并打开</li>
                  <li>注册账号或使用已有账号登录</li>
                  <li>完成初始设置</li>
                </ol>
              </div>
              
              <div class="instruction-section">
                <h3 class="section-subtitle">注意事项</h3>
                <ul class="note-list">
                  <li>确保下载官方版本，避免第三方应用</li>
                  <li>安装过程中需要授予必要权限</li>
                  <li>建议使用WiFi环境下载，应用大小约50MB</li>
                </ul>
              </div>
              
              <van-button 
                type="primary" 
                block 
                class="next-button"
                @click="handleStepClick(2)"
              >
                下一步 <van-icon name="arrow" class="next-icon" />
              </van-button>
            </div>
          </div>
          
          <!-- 步骤2：手表蓝牙数据测量 -->
          <div v-if="activeStep === 2" class="step-content">
            <div class="content-card">
              <h2 class="card-title">手表蓝牙数据测量</h2>
              
              <div class="watch-image-container">
                <img 
                  src="https://images.unsplash.com/photo-1508685096489-7aacd43bd3b1?q=80&w=1000&auto=format&fit=crop"
                  alt="手表蓝牙" 
                  class="watch-image"
                />
              </div>
              
              <div class="instruction-section">
                <h3 class="section-subtitle">开启手表蓝牙</h3>
                <ol class="step-list">
                  <li>在手表主界面下滑或进入设置</li>
                  <li>找到蓝牙选项并点击开启</li>
                  <li>确认蓝牙图标显示在状态栏</li>
                </ol>
              </div>
              
              <div class="instruction-section">
                <h3 class="section-subtitle">进入健康监测模式</h3>
                <ol class="step-list">
                  <li>在手表主界面找到健康监测应用</li>
                  <li>选择需要监测的健康数据类型（心率、血氧、睡眠等）</li>
                  <li>按照提示佩戴手表并开始监测</li>
                  <li>确保手表与皮肤紧密接触以获取准确数据</li>
                </ol>
              </div>
              
              <div class="warning-card">
                <h3 class="warning-title">注意事项</h3>
                <ul class="warning-list">
                  <li>手表电量需保持在20%以上以确保稳定监测</li>
                  <li>监测过程中请保持手表佩戴位置稳定</li>
                  <li>每次监测至少持续5分钟以收集有效数据</li>
                </ul>
              </div>
              
              <div class="navigation-buttons">
                <van-button 
                  plain 
                  type="primary" 
                  class="prev-button"
                  @click="handleStepClick(1)"
                >
                  上一步
                </van-button>
                <van-button 
                  type="primary" 
                  class="next-button"
                  @click="handleStepClick(3)"
                >
                  下一步 <van-icon name="arrow" class="next-icon" />
                </van-button>
              </div>
            </div>
          </div>
          
          <!-- 步骤3：注册APP链接蓝牙手表 -->
          <div v-if="activeStep === 3" class="step-content">
            <div class="content-card">
              <h2 class="card-title">注册APP链接蓝牙手表</h2>
              
              <div class="app-image-container">
                <img 
                  src="https://images.unsplash.com/photo-1551816230-ef5deaed4a26?q=80&w=1000&auto=format&fit=crop"
                  alt="APP链接手表" 
                  class="app-image"
                />
              </div>
              
              <div class="instruction-section">
                <h3 class="section-subtitle">注册安瞳APP账号</h3>
                <ol class="step-list">
                  <li>打开安瞳APP，点击"注册"按钮</li>
                  <li>输入手机号码并获取验证码</li>
                  <li>设置账号密码</li>
                  <li>完成个人信息填写（身高、体重、年龄等）</li>
                </ol>
              </div>
              
              <div class="instruction-section">
                <h3 class="section-subtitle">链接蓝牙手表</h3>
                <ol class="step-list">
                  <li>在APP中进入"设备"页面</li>
                  <li>点击"添加设备"或"+"按钮</li>
                  <li>选择"BTDapp智能手表"型号</li>
                  <li>确保手表已开启蓝牙并处于可发现状态</li>
                  <li>在搜索到的设备列表中选择您的手表</li>
                  <li>按照提示完成配对</li>
                </ol>
              </div>
              
              <div class="info-card">
                <h3 class="info-title">故障排除</h3>
                <ul class="info-list">
                  <li>如果搜索不到设备，请尝试重启手表和手机蓝牙</li>
                  <li>确保手表与手机的距离不超过10米</li>
                  <li>部分手机需要同时开启位置服务才能正常使用蓝牙功能</li>
                </ul>
              </div>
              
              <div class="navigation-buttons">
                <van-button 
                  plain 
                  type="primary" 
                  class="prev-button"
                  @click="handleStepClick(2)"
                >
                  上一步
                </van-button>
                <van-button 
                  type="primary" 
                  class="next-button"
                  @click="handleStepClick(4)"
                >
                  下一步 <van-icon name="arrow" class="next-icon" />
                </van-button>
              </div>
            </div>
          </div>
          
          <!-- 步骤4：贡献数据到DAPP -->
          <div v-if="activeStep === 4" class="step-content">
            <div class="content-card">
              <h2 class="card-title">贡献数据到DAPP</h2>
              
              <div class="data-image-container">
                <img 
                  src="https://images.unsplash.com/photo-1639322537228-f710d846310a?q=80&w=1000&auto=format&fit=crop"
                  alt="数据贡献" 
                  class="data-image"
                />
              </div>
              
              <div class="instruction-section">
                <h3 class="section-subtitle">获取数据贡献码</h3>
                <ol class="step-list">
                  <li>在安瞳APP中进入"我的"页面</li>
                  <li>找到并点击"数据贡献"选项</li>
                  <li>生成您的唯一数据贡献码和贡献Hash</li>
                  <li>复制贡献码和Hash</li>
                </ol>
              </div>
              
              <div class="instruction-section">
                <h3 class="section-subtitle">提交数据贡献</h3>
                <ol class="step-list">
                  <li>返回BTDapp，进入"挖矿"页面</li>
                  <li>点击"提交数据贡献"按钮</li>
                  <li>粘贴您的贡献码和Hash</li>
                  <li>确认提交</li>
                  <li>系统验证后将开始计算您的挖矿收益</li>
                </ol>
              </div>
              
              <div class="reward-card">
                <h3 class="reward-title">数据奖励标准</h3>
                <div class="reward-item">
                  <span class="reward-type">心率数据预计</span>
                  <span class="reward-value">5 HDFS/小时</span>
                </div>
                <div class="reward-item">
                  <span class="reward-type">血氧数据预计</span>
                  <span class="reward-value">15 HDFS/小时</span>
                </div>
                <div class="reward-item">
                  <span class="reward-type">睡眠数据预计</span>
                  <span class="reward-value">30 HDFS/晚</span>
                </div>
                <div class="reward-item">
                  <span class="reward-type">运动数据预计</span>
                  <span class="reward-value">2 HDFS/小时</span>
                </div>
              </div>
              
              <p class="privacy-note">
                您的健康数据将经过匿名化处理，仅用于健康研究和分析。BTDapp重视用户隐私，所有数据传输均采用端到端加密技术。
              </p>
              
              <div class="navigation-buttons">
                <van-button 
                  plain 
                  type="primary" 
                  class="prev-button"
                  @click="handleStepClick(3)"
                >
                  上一步
                </van-button>
                <van-button 
                  type="success" 
                  class="finish-button"
                  @click="goToHome"
                >
                  完成
                </van-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getFinance } from '@/api/exchange'


const finance = ref({})

// 获取财务数据
const fetchFinanceData = async () => {
  try {
    const res = await getFinance()
    if (res && res.data) {
      finance.value = res.data
      console.log('获取财务数据成功:', finance.value)
    }
  } catch (error) {
    console.error('获取财务数据失败:', error)
  }
}

// 下载APP
const downloadApp = (type) => {
  if (type === 'ios' && finance.value.ios) {
    window.location.href = finance.value.ios
  } else if (type === 'android' && finance.value.ado) {
    window.location.href = finance.value.ado
  } else {
    console.log('下载链接不可用')
  }
}

// 组件挂载时获取财务数据
onMounted(() => {
  fetchFinanceData()
})

const router = useRouter()
const activeStep = ref(1)

// 导航方法
const goBack = () => {
  router.back()
}

const handleStepClick = (step) => {
  activeStep.value = step
}

const goToHome = () => {
  router.push('/')
}
</script>

<style scoped>
.mining-container {
  min-height: 100vh;
  background-color: white;
  padding-bottom: 24px;
}

/* 顶部导航 */
.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 44px;
  background-color: white;
  z-index: 100;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.back-button {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  margin-left: 12px;
}

/* 主要内容 */
.content-container {
  padding: 60px 16px 16px;
  max-width: 800px;
  margin: 0 auto;
}

.steps-and-content {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .steps-and-content {
    flex-direction: row;
    gap: 16px;
  }
  
  .steps-container {
    width: 33.333%;
  }
  
  .content-area {
    width: 66.667%;
  }
}

/* 左侧步骤 */
.steps-container {
  margin-bottom: 16px;
}

.steps-title {
  font-size: 14px;
  font-weight: 500;
  color: #323233;
  margin-bottom: 12px;
}

.steps-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.step-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background-color: #f5f7fa;
  color: #323233;
  cursor: pointer;
  transition: all 0.3s;
}

.step-item:hover {
  background-color: #e8eaed;
}

.step-item.active {
  background-color: #1989fa;
  color: white;
}

.step-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: white;
  color: #1989fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  margin-right: 12px;
}

/* 挖矿收益卡片 */
.mining-profits-card {
  background-color: #e0f2ff;
  border-radius: 8px;
  padding: 16px;
}

.profits-title {
  font-size: 16px;
  font-weight: 500;
  color: #0960c5;
  margin-bottom: 12px;
}

.profit-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.profit-row:last-child {
  margin-bottom: 0;
}

.profit-label {
  font-size: 14px;
  color: #646566;
}

.profit-value {
  font-size: 14px;
  font-weight: 500;
  color: #1989fa;
}

/* 右侧内容 */
.content-area {
  flex: 1;
}

.step-content {
  height: 100%;
}

.content-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  height: 100%;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #323233;
}

/* 步骤1：下载安瞳APP */
.app-image-container,
.watch-image-container,
.data-image-container {
  height: 240px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}

.app-image,
.watch-image,
.data-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.download-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}

.ios-button,
.android-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-icon {
  margin-right: 4px;
}

.instruction-section {
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #323233;
}

.step-list,
.note-list {
  padding-left: 20px;
  font-size: 14px;
  color: #646566;
  line-height: 1.6;
}

.step-list li,
.note-list li {
  margin-bottom: 4px;
}

.next-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1989fa !important;
  border: none !important;
  font-weight: 500;
}

.next-icon {
  margin-left: 4px;
}

/* 步骤2：手表蓝牙数据测量 */
.warning-card {
  background-color: #fff7e6;
  border: 1px solid #ffe7ba;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 24px;
}

.warning-title {
  font-size: 16px;
  font-weight: 500;
  color: #d48806;
  margin-bottom: 8px;
}

.warning-list {
  padding-left: 20px;
  font-size: 14px;
  color: #d48806;
  line-height: 1.6;
}

.warning-list li {
  margin-bottom: 4px;
}

.navigation-buttons {
  display: flex;
  justify-content: space-between;
}

.prev-button {
  border-color: #1989fa !important;
  color: #1989fa !important;
}

/* 步骤3：注册APP链接蓝牙手表 */
.info-card {
  background-color: #e6f4ff;
  border: 1px solid #bae0ff;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 24px;
}

.info-title {
  font-size: 16px;
  font-weight: 500;
  color: #1677ff;
  margin-bottom: 8px;
}

.info-list {
  padding-left: 20px;
  font-size: 14px;
  color: #1677ff;
  line-height: 1.6;
}

.info-list li {
  margin-bottom: 4px;
}

/* 步骤4：贡献数据到DAPP */
.reward-card {
  background-color: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.reward-title {
  font-size: 16px;
  font-weight: 500;
  color: #52c41a;
  margin-bottom: 12px;
}

.reward-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}

.reward-type {
  color: #52c41a;
}

.reward-value {
  font-weight: 500;
  color: #389e0d;
}

.privacy-note {
  font-size: 14px;
  color: #646566;
  line-height: 1.6;
  margin-bottom: 24px;
}

.finish-button {
  background-color: #52c41a !important;
  border: none !important;
  font-weight: 500;
}
</style>